// pages/index/index.js
let chart = null
let name_list = []
const data = []
function onInitChart(canvas, width, height, F2) {
  // data.map(function (item) {  //回调函数
  //   name_list.push(item.time)
  // })
  chart = new F2.Chart({
    el: canvas,
    width,
    height,
    animate: true
  })
  chart.source(data, {
    sort: {
      type: "linear",
      // 滚动条包含几个
      min: 0,
      max: 5,
      // 传入不同的sort转换对应的名字
      formatter: function (val) {
        return name_list[val]  //ss标记  详情回调看这个地方
      }
    }
  });

  // chart.legend(true);

  chart.tooltip({
    showCrosshairs: true,
    showItemMarker: false,
  });

  chart.point().position("sort*tem")
  chart.line().position("sort*tem").shape('smooth').color("#999"); //当前坐标轴
  chart.repaint();
  // 按照x轴滑动

  chart.interaction('pan');
  // 定义进度条
  chart.scrollBar({
    mode: 'x',
    xStyle: {
      offsetY: -5
    }
  });

  chart.render()
  return chart


}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    opts: {
      onInit: onInitChart //这一步很重要
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
let arr = [{
    time: "18:00",
    tem: 16,
    sort: 0
  },
  {
    time: "17:00",
    tem: 20,
    sort: 1
  },
  {
    time: "16:00",
    tem: 21,
    sort: 2
  },
  {
    time: "15:00",
    tem: 22,
    sort: 3
  },
  {
    time: "14:00",
    tem: 20,
    sort: 4
  },
  {
    time: "13:00",
    tem: 19,
    sort: 5
  },
  {
    time: "12:00",
    tem: 19,
    sort: 6
  },
  {
    time: "11:00",
    tem: 19,
    sort: 7
  },
  {
    time: "10:00",
    tem: 18,
    sort: 8
  },
  {
    time: "09:00",
    tem: 18,
    sort: 9
  },
  {
    time: "08:00",
    tem: 17,
    sort: 10
  },
  {
    time: "07:00",
    tem: 17,
    sort: 11
  },
  {
    time: "06:00",
    tem: 17,
    sort: 12
  },
  {
    time: "05:00",
    tem: 10,
    sort: 13
  },
  {
    time: "04:00",
    tem: 17,
    sort: 14
  },
  {
    time: "03:00",
    tem: 17,
    sort: 15
  },
  {
    time: "02:00",
    tem: 27,
    sort: 16
  },
  {
    time: "01:00",
    tem: 18,
    sort: 17
  },
  {
    time: "00:00",
    tem: 18,
    sort: 18
  },
  {
    time: "23:00",
    tem: 48,
    sort: 19
  }
];
//注意图标上显示的折线图数据必须是数值类型，否则Y坐标的数值会显示不对
setTimeout(function () { //更新视图数据
  arr.map(function (item) {  //用于页面回调
    name_list.push(item.time)  //该值对应x坐标的名称详情看上方 ss标记
  })
  chart.clear(); // 清理所有
  chart.source(arr); // 加载新数据
  chart.point().position("sort*tem")  //定义图标类型
  chart.line().position("sort*tem").shape('smooth').color("#999");  //定义折现
  chart.render();
  // chart.changeData(arr)
}, 1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})